<template>
    <div>
        <processTree ref="process-tree" @selectedNode="nodeSelected"/>
  
      <!-- 右侧的画板，配置单节点。 -->
      <el-drawer
        
        :visible.sync="showConfig"
        :modal="false"
        >
        <!-- <span>我来啦!</span> -->
        <span slot="title">
          <div>
            <span style="cursor: pointer;" v-if="selfShow" @click="selfShow = false"><i class="el-icon-edit"></i>{{ this.$store.state.flow.selectedNode.name }}</span>
            <el-input v-else type="text" @input="inputChange" v-model="$store.state.flow.selectedNode.name" @blur="selfShow=true" />
            
          </div>
          
        </span>
        <div class="node-config-content">
          <node-config ref="nodeConfig"/>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script>
  import processTree from './components/processTree.vue'
  import NodeConfig from './components/NodeConfig'
//   import Template from "@views/template";
  
  export default {
    name: "processWrap",
    // components: {Template, ProcessTree, NodeConfig},
    components:{
        processTree,
        NodeConfig
    },
    data() {
      return {
        selfName:'',
        selfShow:true,

        scale: 100,
        selected: {},
        showInput: false,
        showConfig: false
      }
    },
    computed: {
      selectedNode() {
        return this.$store.state.flow.selectedNode
      }
    },
    mounted() {
      this.selfName = this.$store.state.flow.selectedNode.name
    },
    methods: {
      inputChange(val){
        // this.$store.commit('selectedNode', {
        //   ...this.$store.state.flow.selectedNode,
        //   name:val
        // })
      },
      validate() {
        return this.$refs["process-tree"].validateProcess()
      },
      nodeSelected(node) {
        this.showConfig = true;
      }
    },
    watch: {
      showConfig(newVal){
        if(newVal){
          this.selfName = this.$store.state.flow.selectedNode.name
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .design {
    margin-top: 100px;
    display: flex;
    transform-origin: 50% 0px 0px;
  }
  
  .scale {
    position: fixed;
    top: 180px;
    right: 40px;
  
    span {
      margin: 0 10px;
      font-size: 15px;
      color: #7a7a7a;
      width: 50px;
    }
  }
  
  .node-config-content {
    padding: 0 20px 20px;
  }
  
//   /deep/ .el-drawer__body {
//     overflow-y: auto;
//   }
  </style>
  